<!DOCTYPE html>
<html>
	<head>
		<!-- 2.新制作一个页面，要求：
		       2.1 至少包含以下元素：3个DIV,标题，5个P标签，图片，列表 
		       2.2 分别实现 id,类，标签三种方式查找以上元素 -->
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="div_id">My Favorite Basketball Player Is SC</div>
		<div class="div_class">His efforts and achievements inspired me</div>
		<div>yeah</div>
		<button id="get_div">获取div</button>
		
		<h1 id="h1_id" class="h1_class">标题</h1>
		<button id="get_h1">获取h1</button>
		
		<p id="p_id">tulpakorn</p>
		<p class="p_class">max</p>
		<p>maxtul</p>
		<p>111111</p>
		<p>222222</p>
		<button id="get_p">获取p</button>
		<br>
		
		<img id="img_id" class="class_id" src="img/微信图片_20201228193731.jpg" border="1px solid #999" style="width: 66px; height:66px; margin:10px,0;">
		<br>
		<button id="get_img">获取img</button>
		
		<ul id="ul_id" class="ul_class">
			<li>列</li>
			<li>表</li>
		</ul>
		<br>
		<button id="get_ul">获取ul</button>
	</body>
	<script type="text/javascript">
		function findDiv(){
			console.log("S 获取Div")
			console.log(document.getElementById("div_id"))
			console.log(document.getElementsByClassName("div_class"))
			console.log(document.getElementsByTagName("div"))
			console.log("Y 获取Div")
		}
		document.getElementById("get_div").onclick=findDiv;
		function findH1(){
			console.log("S 获取H1")
			console.log(document.getElementById("h1_id"))
			console.log(document.getElementsByClassName("h1_class"))
			console.log(document.getElementsByTagName("h1"))
			console.log("Y 获取H1")
		}
		document.getElementById("get_h1").onclick=findH1;
		function findP(){
			console.log("S 获取P")
			console.log(document.getElementById("p_id"))
			console.log(document.getElementsByClassName("p_class"))
			console.log(document.getElementsByTagName("p"))
			console.log("Y 获取P")
		}
		document.getElementById("get_p").onclick=findP;
		function findImg(){
					console.log("S 获取img")
					console.log(document.getElementById("img_id"))
					console.log(document.getElementsByClassName("img_class"))
					console.log(document.getElementsByTagName("img"))
					console.log("Y 获取img")
				}
		document.getElementById("get_img").onclick=findImg;
		function findUl(){
					console.log("S 获取ul")
					console.log(document.getElementById("ul_id"))
					console.log(document.getElementsByClassName("ul_class"))
					console.log(document.getElementsByTagName("ul"))
					console.log("Y 获取ul")
				}
		document.getElementById("get_ul").onclick=findUl;
	</script>
	
	
</html>
